<script>
import Panel from '../Panel.vue'
import MonacoEditor from "../../comp/MonacoEditor.vue";
import {ajax} from 'framework'
import {message} from 'heyui'
export default {
  name: "databaseEditor",
  components:{MonacoEditor, Panel},
  props:{
    params:Object
  },
  data(){
    let id=this.$props.params.id
    if(!id){
      id="default"
    }
    return {
      sql:'',
      dbId:id,
      options:{
        automaticLayout:true,
        lineNumbers:'off',
        minimap: {
          enabled:false
        }
      },
      tableParam:{
          keyName: 'key',
          titleName: 'title',
          dataMode: 'list',
          childrenName: 'children',
          getDatas: (parent, resolve) => {
            console.log(parent)
            //ajax.get("")
            if(!parent){
              //获取数据表
              ajax.get("db/tables/"+id).then(res=>{
                resolve(res.data)
              })
            }else{
              if(!parent.type){
                resolve([])
              }else{
                ajax.get("db/fields/"+id+"/"+parent.key).then(res=>{
                  res.data.forEach(it=>it.children=[])
                  resolve(res.data)
                })
              }


            }
          }
      }
    }
  },
  methods:{
    runSql(){
      if(!this.sql){
        message("sql 为空")
        return
      }
      ajax.formPost("db/execSql",{id:this.dbId,sql:this.sql}).then(r=>{
        console.log(r)
      })
    }
  }
}

</script>

<template>
  <Panel>
    <div style="display:flex;flex-direction:column;gap:10px;overflow:hidden;height: 100%">
      <div>
        <Button icon="jeicon-take-back" text @click="$router.back">返回</Button>
        <span style="float: right">
           <Button icon="jeicon-play" text @click="runSql">执行</Button>
        </span>
      </div>
      <div style="flex: 1;display: flex;flex-direction: row;height: 100%;border: 1px solid #f3f3f3;">
        <div style="width: 250px;border-right: 1px solid #f3f3f3;height: 100%;overflow: hidden;">
          <div style="height: 100%;overflow-y: auto;">
            <Tree :option="tableParam"></Tree>
          </div>
        </div>
        <MonacoEditor v-model="sql" language="sql" :options="options" style="flex:1">

        </MonacoEditor>
      </div>
    </div>


  </Panel>
</template>
